<template>
  <div class="index-container">
    <div class="shop-top">
      <div class="w1200">
        <div class="fr" ><router-link :to="`/shoplist`" title="融易装">
              <i class="el-icon-house" style="margin-right:5px;"></i>首页
            </router-link></div>
        <div class="fl">
          <div class="sn-quick-menu">
            <div class="login"><img v-if="info.logo"
                   :src="info.logo.path"
                   alt="">{{info.name?info.name:'暂未设置'}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="header">
      <div class="headerLayout w1200">
        <div class="headerCon">
          <h1 class="mallLogo">
            <router-link :to="`/shoplist`"
                         title="融易装">
              <img src="../img/logo.png">
            </router-link>
          </h1>
          <div class="mallSearch">
            <form action=""
                  class="layui-form"
                  novalidate>
              <input type="text"
                     v-model="keyword"
                     class="layui-input"
                     placeholder="搜索关键字">
              <button class="layui-btn"
                      @click="filterPops()">
                <i class="el-icon-search"></i>
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="content content-nav-base commodity-content">

      <div class="main-nav">
        <div class="inner-cont0">
          <div class="inner-cont1 w1200">
            <div class="category-types"
                 style="">
              <h3>全部分类</h3>
            </div>
            <div class="inner-cont2">
              <router-link :to="`/nowlist`">选材中心</router-link>
              <router-link :to="`/orderlist`" class="active">我的订单</router-link>
              <router-link :to="`/nowadderss`">地址管理</router-link>
              <router-link :to="`/nowcart`">购物车</router-link>
            </div>
          </div>
        </div>
      </div>

      <div class="commod-cont-wrap"
           style="background:#f8f8f8;">
        <div class="commod-cont w1200 layui-clear">
          <div class="order-top">我的订单</div>
          <div class="tablist">
            <div class="s_cTabs">
              <div class="s_ctItem" v-for="(item,index) in carTypes" :class="{active:current==index}" @click="tabChange(index)">{{item.name}}<i></i></div>
            </div>
            <div class="nocard" v-if="list.length == 0">
              <div class="divimg"><img src="../img/icon_gou.png"/></div>
              <span>暂无订单信息</span>
            </div>
            <div v-else>
              <table class="td-void order-tb">
                 <tbody v-for="(item,index) in list" :key="index">
                  <tr class="sep-row"><td colspan="5"></td></tr>
                      <tr class="tr-th">
                      <td colspan="5">
                      <span class="gap"></span>
                      <span class="dealtime">订单号：{{item.order_code}}</span>
                      <span class="number" style="color:#333;"><i class="el-icon-house" style="margin-right:5px;"></i>{{item.store_name}}</span>
                      </td>
                  </tr>
                  <tr class="tr-bd">
                          <td>
                            <div class="goodslist" v-for="(items,indexs) in item.orderItems" :key="indexs">
                              <div class="goods-item">
                                  <div class="p-img">
                                          <img class="" :src="items.main_imgurl" width="60" height="60">
                                  </div>
                                  <div class="p-msg">
                                      <div class="p-name">
                                        {{items.product_title}}
                                      </div>        
                                  </div>
                              </div>
                              <div class="goods-number">
                                  <p v-for="(attr_params,index) in items.attr_params" style="display: inline-block;">
                                    <span v-if="attr_params.attr_name">{{attr_params.attr_name}}{{attr_params.attr_value}}</span>
                                    <span v-if="attr_params.key">{{attr_params.key}}{{attr_params.value}}</span>
                                  </p>
                              </div>
                              <div class="goods-number">
                                  x{{items.num}}
                              </div>
                            </div>
                  
                          </td>
                              <td>
                                  <div class="amount">
                                      <span v-if="item.is_many_way == 1" style="margin-right:10px;" class="txt">定金 ￥{{item.deposit_price || 0.00}}</span>
                                      <span>总价 ¥{{item.price ||0.00}}</span> <br>
                                  </div>
                              </td>
                              <td rowspan="1">
                                  <div class="status">
                                  <span class="order-status ftx-03">{{status[item.order_status]}}</span>
                                </div>
                              </td>
                              <td rowspan="1">
                                  <div class="operate" v-if="item.order_status == 1">
                                    <span class="a-baitiao" @click="todeatil(item.order_code)">订单详情</span>
                                    <span class="" @click="cancelOrder(item.order_code)">取消订单</span>
                                    <span class="" @click="daochuOrder(item.order_code)">导出清单</span>
                                    <span class="" @click="getpayorder(item.order_code,item)">立即支付</span>
                                  </div>
                                  <div class="operate" v-if="item.order_status == 2">
                                    <span class="a-baitiao" @click="todeatil(item.order_code)">订单详情</span>
                                    <span class="" @click="daochuOrder(item.order_code)">导出清单</span>
                                    <span class="" v-if="item.is_many_way == 1 && item.balance_status == 0" @click="getpayorder(item.order_code,item)">支付尾款</span>
                                  </div>
                                  <div class="operate" v-if="item.order_status == 3">
                                    <span class="a-baitiao" @click="todeatil(item.order_code)">订单详情</span>
                                    <span class="" @click="daochuOrder(item.order_code)">导出清单</span>
                                    <span class="" v-if="item.arrive_status == 0" @click="getCartList(item.order_code)">确认收货</span>
                                    <span class="" v-if="item.is_many_way == 1 &&item.balance_status == 0" @click="getpayorder(item.order_code,item)">支付尾款</span>
                                  </div>
                                  <div class="operate" v-if="item.order_status == 4">
                                    <span class="a-baitiao" @click="todeatil(item.order_code)">订单详情</span>
                                    <span class="" @click="daochuOrder(item.order_code)">导出清单</span>
                                  </div>
                                  <div class="operate" v-if="item.order_status == 5">
                                    <span class="a-baitiao" @click="todeatil(item.order_code)">订单详情</span>
                                    <span class="" @click="daochuOrder(item.order_code)">导出清单</span>
                                  </div>
                              </td>
                          </tr>
                  </tbody>
              </table>
              <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-sizes="[20, 40, 60, 80]"
              :page-size="pagesize"
              layout="sizes, prev, pager, next"
              :total="listcount">
            </el-pagination>
           </div> 
          </div>
     
        </div>
      </div>
    </div>
    
    <el-dialog
      title="订单支付"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose">
      <div class="ep-order">
         <div class="ep-order-tit"> <dl><dt>商品订单：</dt> <dd>{{orderdetail.order_code}}</dd> </dl> </div>
         <div class="ep-order-tit"> <span v-if="orderdetail.order_is_many_way == 1">支付金额：<em class="rmb"><i>¥</i>{{orderdetail.order_deposit_money || '0.00'}}</em></span><span v-else>支付金额：<em class="rmb"><i>¥</i>{{orderdetail.price || '0.00'}}</em></span></div>
          <div class="paybox" style="margin-top:15px;">
            <div class="left-box" @click="radioChange(1)" :class="{active:tapIndex==1}"><div class="weixin"></div>微信支付</div>
            <div class="left-box" @click="radioChange(2)" :class="{active:tapIndex==2}"><div class="xianxia"></div>线下支付</div>
          </div>
          <div class="ep-pay-method">
              <dl> 
                <!-- <dt v-if="tapIndex == 1">支付方式：微信支付</dt>
                <dt v-else>支付方式：线下支付</dt> -->
                <dd class="pay-channel ">
                  <div v-if="tapIndex == 1"><img style="width:200px;height:200px" :src="code_url" /></div>
                  <qriously v-else :value="initQCode" :size="180" style="padding:20px;"/>  
                  <div v-if="tapIndex == 1" class="ep-wxpay-qrcode-notice">请打开手机微信，扫一扫完成支付</div>
                  <div v-else class="ep-wxpay-qrcode-notice">请扫一扫进行核销</div>    
                </dd>
              </dl>
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="gitdialog()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="确认收货"
      :visible.sync="dialogVshow"
      width="60%"
      :before-close="handleCloses">
      <div class="ep-order">
         <section class="shopcartContainer">
                <div class="shopcartContainerMain">
                  <table class="cont1 mobile_hidden" style="width:100%;"><!--PC端购物车-->
                    <tr class="title_tr">
                      <th style="width: 100px;"><span class="c_sSelect" :class="{'active': isAllSelect}" @click="selectAll"></span>全选</td>
                      <th style="width: 60px;"></th>
                      <th style="width: 310px;">商品</th>
                      <th style="width: 130px;">规格</th>
                      <th style="width: 130px;">单价</th>
                      <th style="width: 160px;">数量</th>
                    </tr>
                    <tr class="br"><td colspan="8"><!--分割线--></td></tr>
                    <template v-for="(items,index) in cart">
                    <tr class="merchant"><td colspan="8"><span style="margin-top: 2px;margin-right:5px;float:left;" class="c_cSelect" :class="{'active': items.select}" @click="selectShop(items.courier_num)"></span>快递:{{items.express_name}}  订单号:{{items.courier_num}}</td></tr>
                    <tr v-for="(item,index) in items.list" :key="index">
                      <td><span class="c_cSelect" :class="{'active': item.select}" @click="selectGoods(items.courier_num, item.id)"></span></td>
                      <td><img :src="item.main_imgurl" class="shopImg"/></td>
                      <td>
                        <router-link class="shopName" :to="{path:'/shopdeatil',query: {product_id: item.product_id}}">{{item.product_title}}</router-link>
                      </td>
                      <td><p v-for="(item2,index2) in item.attribute" :key="index2">{{item2.value}}</p></td>
                      <td><p class="cost_price">底价:￥<span>{{item.cost_price}}</span></p><p class="s_price">售价:￥<span>{{item.price}}</span></p><p class="s_price">原价:￥<span>{{item.primary_price}}</span></p></td>
                      <td>
                        x{{item.num}}
                      </td>
                    </tr>
                    <tr class="br"><td colspan="8"><!--分割线--></td></tr>
                    </template>
                  </table>
                </div>   
            </section>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toCartList()">确 定</el-button>
      </span>
    </el-dialog>

    <div class="footer">
      <div class="ng-promise-box">
        <div class="ng-promise w1200">
          <p class="text">
            <a class="icon1"
               href="javascript:;">7天无理由退换货</a>
            <a class="icon2"
               href="javascript:;">送货上门</a>
            <a class="icon3"
               style="margin-right: 0"
               href="javascript:;">100%品质保证</a>
          </p>
        </div>
      </div>
      <div class="mod_help w1200">
        <!-- <p>
        <a href="javascript:;">关于我们</a>
        <span>|</span>
        <a href="javascript:;">帮助中心</a>
        <span>|</span>
        <a href="javascript:;">售后服务</a>
        <span>|</span>
        <a href="javascript:;">行业资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p> -->
        <p class="coty">融易装版权所有 &copy; 2012-2020</p>
      </div>
    </div>

  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    data() {
      return {
        status: {
				1: "待付款",
				2: "待发货",
				3: "待收货",
				4: "已完成",
				5: "已关闭"
      },
      carTypes:[
				{
				  name:'全部'
				},
				{
				  name:'待付款'
				},
				{
				  name:'待发货'
				},
				{
				  name:'待收货'
				},
				{
				  name:'已完成'
				},
			],
        name: '小刀',
        info: {},
        mobile: '',
        current: '0',
        keyword: '',
        list:[],
        searchVal:'',
        page:1,
        pagesize:20,
        order_status:'',
        dialogVisible: false,
        dialogadders:false,
        dialogVshow:false,
        listcount:'',
        listnum:'',
        code:'',
        cart: [],
				isAllSelect: false, // 是否全选中
				sumPrice: 0,
        sumCostPrice: 0,
        orderdetail:'',
        tapIndex:1,
        order_id:'',
      }
    },
    mounted() {
      this.info = JSON.parse(localStorage.getItem('info'))
      this.mobile = localStorage.getItem('mobile')
      this.getDatalist()
    },
    methods: {
      tabChange(e){
				var index = e
				this.current=index;
				this.order_status = index
        this.list = []
        this.getDatalist()
    },
    gitdialog(){
        this.dialogVisible = false
        this.getDatalist()
      } ,
    handleClose(){
         this.dialogVisible = false
         this.getDatalist()
    }, 
    radioChange(t) {
				if(t == 1){
          this.tapIndex = 1
          this.getpayorder()
				}else{
          this.tapIndex = 2
          this.getpayorder()
				}
      },
    // 订单支付
    getpayorder(id,item){
      if(item){
        this.orderdetail = item
      }
            this.$http.post('/api/admin/shopweb/order/pay', { 
              order_no:this.orderdetail.order_code,
              type:'purchase_order',
              pay_type:this.tapIndex
            }).then(res => {
              if(res.code == 1){
						   let data = res.data
					       if(this.tapIndex == 1){
                     this.dialogVisible = true
                     this.code_url = res.data
                 }else{
                    this.code = res.data.verificationCode
                    this.initQCode = res.data.verificationCode
                    this.dialogVisible = true
                } 
              }else{
                this.$message.warning(res.msg)
              }
            })
    },
      todeatil(order_code) {
        this.$router.push({ name: 'orderdeatil', query: { orderid: order_code } })
      },
      filterPops(){
           this.getDatalist()
      },
      // 获取订单信息
      getDatalist() {
        this.$http.post('/api/admin/shopweb/order/lists', { 
          page:this.page,
          pagesize:this.pagesize,
          order_status:this.order_status,
          keyword:this.keyword
         }).then(res => {
          if(res.code == 1){
						//  for(var i=0;i<res.data.products.length;i++){
						// 	this.list.push(res.data.products[i]); // 加载的数据追加在上一页后面
            //  }
             this.list = res.data.products
						 this.listcount = res.data.count
						 this.listnum = this.list.length
					}
        })
      },
      // 取消订单
      cancelOrder(id) {
        this.$confirm('此操作将取消订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$http.post('/api/admin/shopweb/order/cancel', { 
             order_code:id,
         }).then(res => {
          if(res.code == 1){
            this.getDatalist()
						this.$message({
            type: 'success',
            message: '取消成功!'
          });
					}
        })   
        }).catch(() => {
                    
        });
      },
      handleSizeChange(val) {
        this.pagesize = val
        this.page = 1
        this.getDatalist()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getDatalist()
      },
      //获取收货商品列表
			getCartList(id) {
        this.order_id = id
        this.$http.post('/api/admin/shopweb/order/waitFor', { order_id: id}).then(res => {
          if (res.code == 1) {
            	this.cart = res.data.order_detail
              this.dialogVshow = true
							this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
          }
        })
      },
      // 选择订单
			selectShop(courier_num) {
				let cart = this.cart
				let shop = cart.find(val => val.courier_num == courier_num)
				// 全选or全不选
				shop.select = !shop.select
				shop.list.forEach(val => val.select = shop.select)
				this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
				// this.countPrice()       // 计算价格
			},

			// 选择商品
			selectGoods(courier_num, id) {
				let cart = this.cart
				let shop = cart.find(val => val.courier_num == courier_num)
				let goods = shop.list.find(v => v.id == id)
				// 选中or不选中
				goods.select = !goods.select
				// 判断该订单下商品是否已全选
				let flag = true
				shop.list.forEach(val => {
					if (!val.select) flag = false
				})
				if (shop.select != flag) shop.select = flag
				this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
				// this.countPrice()       // 计算价格
			},

			// 全选or全不选
			selectAll() {
				this.isAllSelect = !this.isAllSelect
				this.cart.forEach(val => {
					val.select = this.isAllSelect
					val.list.forEach(v => v.select = this.isAllSelect)
				})
				this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
				// this.countPrice()       // 计算价格
			},

			// 验证所有商品是否全选
			verifyAllSelect() {
				let isAll = this.cart.find(val => !val.select) ? false : true
				if (this.isAllSelect != isAll) this.isAllSelect = isAll
      },
      //去收货
			toCartList() {
				let that = this
				let ary = []
				this.cart.forEach(val => {
					val.list.forEach(v => {
						if (v.select) {
							ary.push(
								v.id
							)
						}
					})
				})
        this.$confirm('是否确认收货？ 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.$http.post('/api/admin/shopweb/order/sign', { 
             id_lst: ary.join(),
						 order_id: this.order_id,
         }).then(res => {
          if(res.code == 1){
            this.dialogVshow = false
            this.getDatalist()
            this.$message({
                type: 'success',
                message: '操作成功!'
              }); 
					}
        })   
        }).catch(() => {
              this.$message({
                type: 'success',
                message: '取消成功!'
              });      
        });
			},
      // 计算价格
			// countPrice() {
			// 	let price = 0, costPrice = 0
			// 	this.cart.forEach(val => {
			// 		val.list.forEach(v => {
			// 			if (v.select) {
			// 				price = this.accAdd(price, this.accMul(v.num, v.price))
			// 				costPrice = this.accAdd(costPrice, this.accMul(v.num, v.primary_price))
			// 			}
			// 		})
			// 	})
				
			// 	this.sumPrice = price
			// 	this.sumCostPrice = costPrice
			// },
      // 导出清单
      daochuOrder(id) {
        const user_id = localStorage.getItem('user_id')?localStorage.getItem("user_id"):"";
        this.$confirm('此操作将导出该订单清单', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.open('/api/admin/shopweb/order/export?order_code='+ id + '&user_id=' + user_id  )  
        }).catch(() => {
                 
        });
      },
    }
  }
</script>
<style lang="less" scoped>
  & /deep/ .content {
    padding: 0 !important;
  }
  @import "../css/index.less";
</style>
